<template>
  <el-form
    :model="dynamicValidateForm"
    ref="dynamicValidateForm"
    label-width="80px"
    class="demo-dynamic"
  >
    <div class="ico-style">忘记密码</div>
    <el-form-item prop="passwrod" label="密码">
      <el-input v-model="dynamicValidateForm.password" style="width:200px;" show-password clearable></el-input>
    </el-form-item>

    <el-form-item prop="passwords" label="确认密码">
      <el-input v-model="passwords" style="width:200px;" show-password clearable></el-input>
    </el-form-item>
    <el-form-item
      prop="teleNumber"
      label="手机号码"
      :rules="[
      { required: true, message: '请输入手机号码', trigger: 'blur' },
      { min: 11, max: 11, message: '请输入正确的手机号码', trigger: ['blur'] }
    ]"
    >
      <el-input 
      v-model="dynamicValidateForm.teleNumber" 
      oninput = "value=value.replace(/[^\d]/g,'')" 
      style="width:130px;">
      </el-input>
      <el-button @click="sendMsg" 
      type="primary" :disabled="isDisabled"
      >{{buttonName}}</el-button>
    </el-form-item>
    <el-form-item prop="verification" label="验证码">
      <el-input v-model="verification" style="width:100px;" clearable></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(dynamicValidateForm)" :disabled="isdisabled" >提交</el-button>
      <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      disabled:false,
      dynamicValidateForm: {
        teleNumber: "",
        password: ""
      },
      buttonName: "发送短信",
      isDisabled: false,
      time: 60,
      passwords: "",
      verification: ""
    };
  },
  methods: {
    submitForm(formName) {
      if (this.dynamicValidateForm.password != this.passwords) {
        alert("两次密码不相同");
        this.passwords = "";
      } else if (
        this.dynamicValidateForm.username == "" ||
        this.dynamicValidateForm.password == ""
      ) {
        this.$alert("内容不完善", "警告", {
          confirmButtonText: "确定",
          callback: action => {
            this.$message({
              type: "warning",
              message: `请填写完善`,
              center: true
            });
          }
        });
      } else {
        let _this = this;
        //{"user":_this.dynamicValidateForm,"file": _this.fileUser}
        this.$axios
          .post(
            "http://127.0.0.1:8888/passport/RetrievePassword/" +
              _this.dynamicValidateForm.password +
              "/" +
              _this.verification +
              "/" +
              _this.dynamicValidateForm.email
          )
          .then(res => {
            if (res.data.cole == 200) {
              alert("修改成功!");
                 this.$router.push("/login");
            } else {
              alert("修改失败!");
            }
          })
          .catch(e => {
            alert(e);
          });
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1);
      }
    },
    sendMsg() {
      let me = this;
      var strlength = me.dynamicValidateForm.teleNumber
      strlength = String(strlength)
      if( strlength.length == 11){
        this.$axios
        .get(
          "http://127.0.0.1:8888/passport/teleNumber/" +
            me.dynamicValidateForm.teleNumber
        )
        .then(res => {
           if (res.data == 200) {
            this.$axios
              .post(
                "http://127.0.0.1:8888/passport/teleNumber/" +
                  me.dynamicValidateForm.teleNumber
              )
              .then(res => {
                alert("发送成功!");
              })
              .catch(e => {
                alert(e);
              });
          } else {
            alert("请重试！");
          }
        })
        .catch(e => {
          alert(e);
        });

      me.isDisabled = true;
      let interval = window.setInterval(function() {
        me.buttonName = "（" + me.time + "秒）";
        --me.time;
        if (me.time < 0) {
          me.buttonName = "重新发送";
          me.time = 60;
          me.isDisabled = false;
          window.clearInterval(interval);
        }
      }, 1000);
      }else {
        alert('请输入正确的手机号码！')
        me.dynamicValidateForm.teleNumber = ''
      }
    }
  },
  computed: {
    isdisabled() {
        if (!this.teleNumber && !this.password && !this.verification) {
          return true
        }else {
          return false
        }
    }
  }
}
</script>

 <style scoped>
.el-input__inner {
  width: 200px;
}
.ico-style {
  margin-top: 50px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 30px;
  color: #409eff;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-form-item {
  margin-left: 35px;
}

</style>